<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    
    <title>监视属性-天气案例</title>
    <script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
    <div id="root">
       
        <h3>a的值是{{numbers.a}}</h3>
        <button @click="numbers.a++">点我让a+1</button>
        <hr/>
        <h3>b的值是{{numbers.b}}</h3>
        <button @click="numbers.b++">点我让b+1</button>
    </div>
</body>
<script type="text/javascript" >
 const vm = new Vue({
   el:'#root', 
   data: { 
    isHot:true,
    numbers:{
        a:1,
        b:1
    }
   },
   watch:{
    // numbers:{
    //     deep:true, //开启深度检测
    //     handler(){
    //         console.log("numbers发生改变了")
    //     }
    // }
    //只检测a的变化
  'numbers.a':{
    handler(){
             console.log("a发生改变了")
         }
  }
   }

 });

</script>
</html>